<template>
	<view class="page" :style="{minHeight:windowHeight+'px'}">
		<view class="top">
			<scroll-view scroll-x="true" scroll-with-animation="true">
				<view class="head-tab-box">					
					<view class="head-tab" >
						<view class="tab" :class="idx===-1 ? 'active tab' : ''"  @click="tabTypeFunc(-1)">
							全部<text class="allNum">({{allNum}})</text>
						</view>
						<view class="image-item" v-show="idx==-1">
							<image class="tab tab-iamge" src="../../../static/tab-iamge.png"></image>
						</view>
					</view>
					
					<view class="head-tab" v-for="(item,index) of nav">
						<view class="tab" :class="idx===index ? 'active tab' : ''" @click="tabTypeFunc(index)">
							{{item.name}}
						</view>
						<view class="image-item" v-show="idx==index">
							<image class="tab tab-iamge" src="../../../static/tab-iamge.png"></image>
						</view>
					</view>
				</view>
				<view class="line"></view>
			</scroll-view>
		</view>
		<view style="height: 110rpx;"></view>
		<!-- <view class="item" v-for="(item , index) in singleCar" :key="index" @click="gotoDetail(index)">
			<view class="item_head">
				<view class="day">{{item.day}}</view>
				<view class="site">
					{{item.starting}}→{{item.destination}}
				</view>
				<view class="type">
					{{item.type}}
				</view>
			</view>
			<view class="beginTime">
				{{item.issueTime}}出发
			</view>
			<view class="company">
				<image class="company_image" :src="item.companyLogo"></image>
				<text>{{item.companyName}}</text>
			</view>
			<view class="foot">
				<text>订单号：{{item.order}}</text>
				<view>
					<text>{{item.seat}}座</text>
					<text class="foot_line">|</text>
					<text>{{item.actual_seat}}人</text>
				</view>
			</view>
		</view> -->
		<view class="item" v-for="(item,index) in listData" >
			<view class="item_head" @click="gotoDetail(item.id)">
				<!-- <view class="day">{{item.days}}</view> -->
				<view class="site">
					<view class="item-con-begin-address" v-if="listData.length != 0">
						<view class="dot dot-begin"></view>
						<view>{{item.star_address.b_name}}</view>						
					</view>
					<view class="item-con-begin-address" v-if="listData.length != 0">
						<view class="dot"></view>
						<view>{{item.end_address.d_name}}</view>						
					</view>
					
					<!-- {{item.star_address.b_name}}→{{item.end_address.d_name}} -->
				</view>
				<!-- <view class="type">
					{{item.type}}
				</view> -->
				<view class="item-con-head-status" v-if="item.owner_status==1 ">				
					<view v-if="item.travel_status==0">待出发</view>
					<view v-if="item.travel_status==1">行驶中</view>
					<view v-if="item.travel_status==2">已结束</view>						
				</view>
				<text class="item-con-head-status" v-if=" item.owner_status ==3 ">
					退单申请中
				</text>
				<text class="item-con-head-status" v-if=" item.owner_status ==4 ">
					退单退单驳回
				</text>
				<text class="item-con-head-status" v-if=" item.owner_status ==2 ">
					已退单
				</text>
				<text class="item-con-head-status" v-if=" item.status ==3 ">
					用户退单申请中
				</text>
				<text class="item-con-head-status" v-if=" item.status ==4 ">
					用户退单退单驳回
				</text>
				<text class="item-con-head-status" v-if=" item.status ==2 ">
					用户已退单
				</text>
			</view>
			<view class="beginTime" @click="gotoDetail(item.id)">
				{{item.star_time}}出发
			</view>
			<view class="company" @click="gotoDetail(item.id)">
				<image class="company_image" :src="item.user.avatarUrl"></image>
				<text>{{item.attestation.name}}</text>
			</view>
			<view class="foot" @click="gotoDetail(item.id)">
				<text>订单号：{{item.ordernum}}</text>
				<view>
					<text>{{item.car_number}}车</text>
					<text class="foot_line">|</text>
					<text>{{item.passenger }}人</text>
				</view>
			</view>
			<view class="cancel" v-if="item.owner_status==1 &&item.travel_status==0" @click="cancelOrder(item.id)">取消订单</view>
			<view class="cancel" v-if=" item.owner_status ==3 " @click="cancelReturn(item.id)">取消退单</view>
			<view class="cancel" v-if="item.owner_status!=1 &&item.owner_status!=3" @click="delectOrder(item.id)">删除订单</view>
		</view>
		<view class="yy" v-if="reasonShow"></view>
		<view class="reason" v-if="reasonShow">
			<label>请输入取消订单原因</label>
			<textarea v-model="reasonCon" style="resize: none;" focus="" ></textarea>
			<view class="reason-form" @click="cancelOrder2">提交</view>
		</view>
		<!-- 没有记录 -->
		<view class="d-c-c p30" v-if="listData.length == 0">
			<text class="cont" style="margin-top: 100rpx; margin-left: 20rpx;">亲，暂无相关记录哦</text>
		</view>
		<view v-else v-show="isLoadMore">
			<uni-load-more :loadingType="loadding"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				reasonShow:false,
				reasonCon:'',
				loadding: 0,
				listData: [],
				// {
				// 		name: '全部'+'('+'20'+')',
				// 		id: 1,
				// 		idx: 0
				// 	},
				allNum:'',
				nav: [
					
					
					{
						name: '待出发',
						id: 3,
						idx: 3
					},
					{
						name: '行驶中',
						id: 4,
						idx: 4
					},
					{
						name: '已结束',
						id: 5,
						idx: 5
					},
					{
						name: '退单中',
						id: 6,
						idx: 6
					},
					{
						name: '已退单',
						id: 7,
						idx: 7
					},
				],
				singleCar: [{
						day:'三天',
						id: 1001,
						starting: '永州 林灵',
						destination: ' 东莞 麻涌',
						type: '待出行',
						issueTime: '2021-5-2',
						seat: '16',
						actual_seat: '10',
						companyName: '桂林大聪网络有限公司',
						companyLogo: '../../../static/app/logo.png',
						order:'66666666'
					},
					{
						day:'三天',
						id: 1002,
						starting: '永州 林灵',
						destination: ' 东莞 麻涌',
						type: '待出行',
						issueTime: '2021-5-2',
						seat: '16',
						actual_seat: '10',
						companyName: '桂林大聪网络有限公司',
						companyLogo: '../../../static/app/logo.png',
						order:'66666666'
					},
				],
				idx: -1,
				aa: 17,
				/*可滚动视图区域高度*/
				windowHeight: 0,
				/*当前选中的类别*/
				type_active: 0,
				record: [],
				type: '', //订单类型
				order_id:'',//订单id
				oadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				page: 1,
				pagesize: 10,
				timer:null
			};
		},
		onLoad() {
			this.timer = null;
			this.getDatainfo();
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight;
				}
			});
		},
		onPullDownRefresh() {
			this.page = 1;
			this.listData = [];
			this.getDatainfo();
			setTimeout( () => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.page += 1
				this.getDatainfo();
			}
		},
		onShow() {
			//this.init();
			this.timer = null;
		},
		methods: {
			/* 取消退单 */
			cancelReturn(id) {
				let self = this;
				uni.showModal({
					title: '温馨提示',
					content: '是否要取消此订单',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '取消中'
							});
							self._post('order.CarOrder/cancel_chargeback', {
									id: id,
									type:2
								},
								function(res) {
									if (res.code == 1) {
										self.timer = setTimeout( () => {
											if (self.timer) {
												clearTimeout(self.timer);
												self.timer = null;
											}
											uni.navigateTo({
												url:'/pages/user/orderRecord/orderRecord'
											})
										}, 1000);
										uni.showToast({
											title: '取消成功',
											duration:2000,
											icon:'none'
										});																											
									}
									uni.hideLoading();
								});
						}else if(res.cancel){
							return;
						}
					}
				})
				
			},
			/* 取消订单 */
			cancelOrder(id){
				let self = this;
				uni.showModal({
					title:'温馨提示',
					content:'是否要取消此订单',
					success(res) {
						if(res.confirm){
							self.reasonShow=true
							self.order_id = id;
						}else{
							return;
						}
					}
				})
			},
			cancelOrder2(){
				let self = this;
				if(self.reasonCon == ''){
					uni.showToast({
						title:'请输入取消原因',
						duration:2000,
						icon:'none'
					});
					return;
				}
				self._post('order.CarOrder/owner_cancel',
				{
					reason:self.reasonCon,
					order_id:self.order_id
				},
				function(res){
					if(res.data.id ==self.order_id){
						self.timer = setTimeout( () => {							
							if (self.timer) {
								clearTimeout(self.timer);
								self.timer = null;
							}	
							uni.navigateTo({
								url:'/pages/user/orderRecord/orderRecord'
							})
						}, 1000);
						uni.showToast({
							title:'您的申请已提交，等待后台审核。',
							duration:2000,
							icon:'none'
						});
						
						
						self.reasonShow = false;
					}
					
				})
			},
			/* 删除订单 */
			delectOrder(id) {
				let self = this;
				uni.showModal({
					title: '温馨提示',
					content: '是否要删除此订单',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中'
							});
							self._post('order.CarOrder/del_order', {
									id: id
								},
								function(res) {
									if (res.code == 1) {
										uni.showToast({
											title: '删除成功',
											duration:2000,
											icon:'none'
										});
										self.timer = setTimeout( () => {
										  uni.navigateTo({
										  	url:'/pages/user/orderRecord/orderRecord'
										  })
										  if (self.timer) {
										  	clearTimeout(self.timer);
										  	self.timer = null;
										  }	
										}, 1000);
										
										//self.getDatainfo();
									}
									uni.hideLoading();
								});
						}else if(res.cancel){
							return;
						}
					}
				})
			
			},
			/*tab切换*/
			tabTypeFunc(e) {
				
				this.page = 1;
				this.listData = [];
				if(e == -1){
					this.idx = -1;
					this.type= '';
					this.getDatainfo();
				}else {
					this.type = this.nav[e].id;
					this.idx = e;							
					this.getDatainfo();
				}
			},
			/*获取数据*/
			getDatainfo() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._post('order.CarOrder/owner_order', {
						status_type: self.type,
						ordernum:'',
						page: self.page,
						pageSize:self.pagesize
					},
					function(res) {
						// self.record = res.data.orderlist;
						//self.allNum = self.res.data.list.data.length
						if (res.data.list.data) {
							self.listData = self.listData.concat(res.data.list.data)
							if (res.data.list.data.length < res.data.list.per_page) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								self.isLoadMore = true
								self.loadding = 2
							} else {
								self.isLoadMore = false
							}
						} else {
							self.isLoadMore = true
							self.loadding = 2
						}
						//console.log(self.listData.length)
						self.allNum = res.data.count
						//self.loadding = false;
						uni.hideLoading();
					});
			},
			/*跳转详情*/
			gotoDetail(order_id) {
				console.log(order_id);
				//this.id = this.singleCar[e].id;
				this.order_id = order_id
				//let type = this.type;
				uni.navigateTo({
					url: '/pages/user/orderRecord/detail/detail?select=2&id='+this.order_id
				});
			}

			/* 切换导航条 */
			// tabClick(item) {
			// 	this.idx = item.id;
			// },
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100%;
		overflow: hidden;
		background-color: #F4F4F4;
	}

	.top {
		width: 100%;
		background-color: #FFFFFF;
		position: fixed;
		z-index: 999;
	}

	.nullmsg {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-color: #ffffff;
		margin-top: 0;

	}

	.cont {
		position: absolute;
		top: 120rpx;
		margin-left: -30rpx;
	}
	.head-tab-box{
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.head-tab {
		float: left;
		color: #7e7a75;
		font-size: 30rpx;
		
	}

	.tab {
		width: 120rpx;
		margin: 20rpx 0 10rpx;
		//margin: 20rpx 20rpx 10rpx;
		text-align: center;
		
	}

	.tab-iamge {
		display: flex;
		flex-direction: row;
		height: 16rpx;
		// /margin: 0rpx 20rpx;
	}

	// .line {
	// 	clear: both;
	// 	display: block;
	// 	width: 100%;
	// 	height: 10rpx;
	// 	background-color: #e7e7e7;
	// }

	.active {
		color: rgba(88, 100, 253, 1);
		font-size: 32rpx;
	}

	.item {
		background-color: #FFFFFF;
		width: 90%;
		margin: 20rpx auto;
		padding: 20rpx 20rpx;
		color: #8a8a8a;
	}

	.item_head {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 120rpx;
		color: #000000;
		//line-height: 120rpx;
		border-bottom: 2rpx solid #F4F4F4;
		margin: 0 auto;
		margin-top: -16rpx;
	}

	.day {
		color: #FFFFFF;
		background-color: #007AFF;
		width: 90rpx;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 60rpx;
	}
	.item-con-begin-address{
		display: flex;
		align-items: center;
	}
	.site {
		margin-left: 10rpx;
		font-size: 30rpx;
		font-weight: 700;
	}
	.dot{
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		margin-right: 16rpx;
		background-color: #5E7FFF;
	}
	.dot-begin{
		background-color: #c2c2c2;
	}
	.item-con-head-status{
		color: #FF703A;
	}
	.type {
		margin-left: 130rpx;
		color: #ff6011;
	}

	.beginTime {
		height: 60rpx;
		line-height: 60rpx;
	}

	.company {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.company image {
		width: 60rpx;
		height: 60rpx;
		margin: 10rpx 0;
		margin-right: 10rpx;
		border-radius: 100%;
		
	}

	.foot {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.foot_line {
		margin: 0 10rpx;
	}
	.cancel{
		margin-top: 20rpx;
		width: 100%;
		height: 60rpx;
		line-height: 80rpx;
		text-align: center;
		border-top: 1rpx solid #F1F1F3;
		color: #1546FA;
	}
	.reason{
		position: fixed;
		bottom: 100rpx;
		width: 90%;
		left: 2%;
		//height: 360rpx;
		margin: 0 auto;
		padding: 20rpx;
		background-color: #FFFFFF;
		z-index: 999;
		border-radius: 20rpx;
	}
	.reason label{
		font-size: 30rpx;
		font-weight: 800;
		margin: 20rpx;
	}
	.reason textarea{
		padding: 20rpx;
		width: 90%;
		height: 300rpx;
		margin-top: 10rpx;
		border: 1rpx solid #F4F4F4;
	}
	.reason-form{
		margin: 30rpx 0 20rpx;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #1546FA;
		border-radius: 10rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
	}
	.yy{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #000000;
		opacity: 0.6;
	}
.allNum{
		
		font-size: 20rpx;
	}
	




	// .vip-card {
	// 	padding: 40rpx 20rpx;
	// 	position: relative;
	// 	display: flex;
	// 	flex-direction: row;
	// 	border-bottom: 4rpx solid #e7e7e7;
	// }

	// .vip-image {
	// 	width: 36%;
	// 	height: 180rpx;
	// 	border-radius: 20rpx;
	// 	margin-right: 30rpx;
	// }

	// .vip-image image {
	// 	border-radius: 16rpx;
	// }

	// .vip-content {
	// 	margin-top: 6rpx;
	// 	display: flex;
	// 	flex-direction: column;
	// }

	// .vip-content text:nth-child(2) {
	// 	margin-top: 10rpx;
	// 	color: #7e7a75;
	// 	margin-bottom: 60rpx;
	// }

	// .vip-content text:nth-child(3) {
	// 	color: #f9ac10;
	// }

	// .vip-use {
	// 	width: 160rpx;
	// 	height: 60rpx;
	// 	text-align: center;
	// 	line-height: 60rpx;
	// 	border: 2rpx solid #007AFF;
	// 	border-radius: 100rpx;
	// 	color: #007AFF;
	// 	position: absolute;
	// 	bottom: 40rpx;
	// 	right: 20rpx;
	// }
</style>
